<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
<div id="app">
    <!--模板语言-->

    <!--<span>{{msg}}</span>-->
    <!--<div>{{flag?'male':'female'}}</div>-->
    <!--<span>{{num+1}}</span>-->

    <!--<a v-bind:href="a_href">jump</a>-->
    <!--<input type="button" v-on:click="change" value="修改">-->
    <!--v-bind用于给标签前的属性绑定变量 简写直接 :href  v-on用于绑定事件,简写直接在事件前加@-->
    <!--<a :href="a_href">jump</a>-->

    <!--<span v-if="num==10086">移动</span>-->
    <!--<span v-else-if="num==10010">联通</span>-->
    <!--<span v-else="num==10011">电信</span>-->

    <!--<span v-show="num==10086">移动</span>-->
    <!--<span v-show="num==100861">1111</span>-->
    <!---->
    <!--v-if 是代码执行到此才展示, v-show 是都展示,为不符合的条件标签隐藏display:none-->

    <!--<div v-for="(item,index) in games">{{item}}&#45;&#45;{{index}}</div>-->
    <div v-for="(value,key) in dict_games">{{value}}--{{key}}</div>


</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        //元素
        el:'#app',
        //数据源:存储数据
        data:{
            msg:'hello vue',
            flag:true,
            num:10086,
            a_href:'http://www.baidu.com',
            games:['绝地求生','dota2','英雄联盟'],
            dict_games:{
                k1:'绝地求生',
                k2:'dota2',
                k3:'英雄联盟'
            }
        },
        //方法
        methods:{
//            change(){
//                this.msg='changeVue!!!'
//            },
            change:function(){
//                this.msg='changeVue???'
                this.a_href='http://imdsx.cn'
            }


        }

    })
</script>

</body>
</html>